<template>
  <div class="main">
    <div class="title">
      <a href="/login">登录</a>
      <span>·</span>
      <a class="active" href="/register">注册</a>
    </div>

    <div class="sign-up-container">
      <el-form ref="userForm" :model="params">
        <el-form-item
          class="input-prepend restyle"
          prop="nickname"
          :rules="[
            { required: true, message: '请输入你的昵称', trigger: 'blur' }
          ]"
        >
          <div>
            <el-input
              type="text"
              placeholder="你的昵称"
              v-model="params.nickname"
            />
            <i class="iconfont icon-user" />
          </div>
        </el-form-item>

        <el-form-item
          class="input-prepend restyle no-radius"
          prop="mail"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change']
            }
          ]"
        >
          <div>
            <el-input type="text" placeholder="邮箱号" v-model="params.mail" />
            <i class="iconfont icon-user" />
          </div>
        </el-form-item>

        <el-form-item
          class="input-prepend restyle no-radius"
          prop="code"
          :rules="[
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]"
        >
          <div
            style="width: 100%;display: block;float: left;position: relative"
          >
            <el-input type="text" placeholder="验证码" v-model="params.code" />
            <i class="iconfont icon-user" />
          </div>
          <div
            class="btn"
            style="position:absolute;right: 0;top: 6px;width: 40%;"
          >
            <a
              href="javascript:"
              type="button"
              @click="getCodeFun()"
              :value="codeTest"
              style="border: none;text-decoration:none"
              >{{ codeTest }}</a
            >
          </div>
        </el-form-item>

        <el-form-item
          class="input-prepend"
          prop="password"
          :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
        >
          <div>
            <el-input
              type="password"
              placeholder="设置密码"
              v-model="params.password"
            />
            <i class="iconfont icon-password" />
          </div>
        </el-form-item>

        <div class="btn">
          <input
            type="button"
            class="sign-up-button"
            value="注册"
            @click="submitRegister()"
          />
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import "~/assets/css/sign.css";
import "~/assets/css/iconfont.css";
import registerApi from "@/api/register";
export default {
  layout: "sign",
  data() {
    return {
      params: {
        nickname: null,
        mail: null,
        password: null,
        code: null
      },
      sending: false, //是否发送验证码
      second: 60, //倒计时间
      codeTest: "获取验证码"
    };
  },
  methods: {
    getCodeFun() {
      //防止重复提交
      if (this.sending) return;
      this.sending = true;
      this.timeDown();
      //debugger
      // prop 换成你想监听的prop字段
      this.$refs.userForm.validateField("mail", errMsg => {
        if (errMsg == "") {
          registerApi.getMail(this.params.mail).then(res => {});
        }
      });
    },

    //倒计时
    timeDown() {
      console.log("进入倒计时");
      this.codeTest = this.second;
      //创建定时器
      const timmer = setInterval(() => {
        //计数器减一
        this.codeTest--;
        if (this.codeTest <= 0) {
          //停止定时器
          clearInterval(timmer);
          //还原计数器
          this.codeTest = "获取验证码";
          //还原按钮状态
          this.sending = false;
        }
      }, 1000);
    },
    submitRegister() {
      this.$refs["userForm"].validate(valid => {
        if (valid) {
          registerApi.submitRegister(this.params).then(response => {
            //提示注册成功
            this.$message({
              type: "success",
              message: "注册成功"
            });
            this.$router.push({ path: "/login" });
          });
        }
      });
    }
  }
};
</script>
